<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .bk{width: 800px;height: 450px;overflow:hidden;margin: 0 auto;position: relative}
        .dian span{display: inline-block;width:15px;height: 15px;background: red;border-radius: 100%;position: absolute;bottom: 10px;}
        ul li{list-style: none;float: left}
        ul{width: 2400px;height: 450px;position: relative;}


    </style>
</head>
<body>
<div class="bk">
    <ul>
        <li>
            <img src="images/1.jpg">
        </li>
        <li>
            <img src="images/2.jpg">
        </li>
        <li>
            <img src="images/3.jpg">
        </li>
    </ul>
    <div class="dian">
        <span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span></span>
    </div>
</div>
<script src="images/jquery-3.2.0.min.js"></script>
<script>
    var itemW=$('li:first').width();
    var itemH=$('li:first').height();
    $('span').mouseover(function(){
        var index=$(this).index();
        $('ul').css('left',-index*itemW+'px');
    })
</script>

</body>
</html>